<template>
  <a-form
    ref="formRef"
    :model="formData"
    class="form"
    :label-col-props="{ span: 8 }"
    :wrapper-col-props="{ span: 16 }"
  >
    <a-form-item field="userName" label="用户昵称">
      <a-input v-model="formData.userName" placeholder="请输入用户昵称" />
    </a-form-item>
<!--    <a-form-item field="userAvatar" label="用户头像">-->
<!--      <a-input v-model="formData.userAvatar" placeholder="请输入用户头像" />-->
<!--    </a-form-item>-->
    <a-form-item field="userProfile" label="用户昵称">
      <a-textarea v-model="formData.userProfile" placeholder="请输入用户简介" />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="primary" @click="validate"> 保存</a-button>
        <a-button type="secondary" @click="reset"> 重置</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { UserControllerService, UserUpdateMyRequest } from '@/api/generated';
  import { Message } from '@arco-design/web-vue';

  const formRef = ref<FormInstance>();
  const formData = ref<UserUpdateMyRequest>({
    userAvatar: undefined,
    userName: undefined,
    userProfile: undefined,
  });
  const validate = async () => {
    const res = await UserControllerService.updateMyUserUsingPost(
      formData.value
    );
    if (res) {
      Message.success('更新成功');
      formRef.value?.resetFields();
    } else Message.error(`更新失败，${res.message}`);
  };
  const reset = async () => {
    await formRef.value?.resetFields();
  };
</script>

<style scoped lang="less">
  .form {
    width: 540px;
    margin: 0 auto;
  }
</style>
